<template>
  <div id="R">
    <div class="header">
      <div class="top">
        <div class="item">
          <div>{{ info.total_click > 0 ? info.total_click : 2616966 | million }}</div>
          <div>播放量</div>
        </div>
        <div class="item">
          <div>{{ info.total_dm > 0 ? info.total_dm : 10481 | million }}</div>
          <div>弹幕</div>
        </div>
        <div class="item">
          <div>{{ info.total_coin > 0 ? info.total_coin : 9151 | million }}</div>
          <div>投币</div>
        </div>
        <div class="item">
          <div>{{ info.total_fans > 0 ? info.total_fans : 1909 | million }}</div>
          <div>粉丝</div>
        </div>
      </div>
      <div class="bot">
        <div class="item">
          <div>{{ info.total_like > 0 ? info.total_like : 18077 | million }}</div>
          <div>点赞</div>
        </div>
        <div class="item">
          <div>{{ info.total_reply > 0 ? info.total_reply : 6829 | million }}</div>
          <div>评论</div>
        </div>
        <div class="item">
          <div>{{ info.total_fav > 0 ? info.total_fav : 13000 | million }}</div>
          <div>收藏</div>
        </div>
        <div class="item">
          <div>{{ info.total_share > 0 ? info.total_share : 4531 | million }}</div>
          <div>分享</div>
        </div>
      </div>
    </div>
    <div class="fotter">
      <div>
        骐骥一跃，不能十步<br/>
      </div>
      <div>
        驽马十驾，功在不舍<br/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      info: {}
    };
  },
  filters : {
    million:function (value){//过万处理
      let num;
    if(value > 9999){//大于9999显示x.xx万
        num=(Math.floor(value/1000)/10) + '万';
    }else if( value < 9999 && value>-9999){
      num=value
    }else if(value<-9999){//小于-9999显示-x.xx万
        num = -(Math.floor(Math.abs(value)/1000)/10)+'万'
    }
    return num;
    }
  },
  created() {
    this.$axios.get('http://member.bilibili.com/x/web/index/stat')
    .then((res) => {
      this.info = res.data.data
    })
  },
  computed:{
  },
  watch:{
  },
  methods: {},
};
</script>

<style scoped>
#R {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  cursor: default;
}
.header {
  flex: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 100px 0;
}
.top {
  display: flex;
}
.bot {
  display: flex;
}
.item {
  height: 100px;
  width: 100px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: all .5s;
  color: skyblue;
}
.item:hover {
  background-color: pink;
  color: #fff;
}
.item div:nth-child(1) {
  height: 70px;
  line-height: 70px;
  font-size: 20px;
}
.item div:nth-child(2) {
  height: 30;
  line-height: 30px;
  font-size: 26px;
  font-weight: 800;
  color: #000;
}
.fotter {
  flex: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  font-size: 50px;
  font-weight: 800;
  padding: 100px 0;
}
</style>
